<template>
  <div id="box">
    <!-- 导航栏 -->
    <van-nav-bar title="关于我们" fixed>
      <template #left>
        <van-icon
          name="revoke"
          color="#fdc03a"
          size="25"
          @click="$router.go(-1)"
        />
      </template>
    </van-nav-bar>
    <!-- LOGO -->
    <div class="logo" style="margin-top: 56px">
      <van-image width="26vw" height="26vw" :src="require('../assets/cs-img/logo.png')" />
    </div>

    <!-- 功能模块 -->
    <div class="aboutwe">
      <div class="about_list">
        <div class="list">
          <span>
            <span>当前版本</span>
          </span>
          <span>
            <span>1 .0 .0</span>
          </span>
        </div>

        <div class="list active" @click="$router.push('/agreement')">
          <span>
            <span>用户服务协议</span>
          </span>
          <span>
            <van-icon name="arrow" />
          </span>
        </div>

        <div class="list" @click="$router.push('/agreement')">
          <span>
            <span>相关许可证</span>
          </span>
          <span>
            <van-icon name="arrow" />
          </span>
        </div>

        <div class="list" style="border-bottom: 1px solid rgb(230, 230, 230)" @click="jiazai()">
          <span>
            <span>版本更新</span>
          </span>
          <span>
            <van-icon name="arrow" />
          </span>
        </div>
      </div>
      <div class="bq">&copy; 2022-05 键值对版权所有</div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      value: 1,
    };
  },
  methods: {
    jiazai() {
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "正在检查更新",
      });
      let second = 2;
      const timer = setInterval(() => {
        second--;
        if (second == 0) {
          clearInterval(timer);
          Toast.success("当前已是最新版本");
        }
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep.van-nav-bar__text {
  color: #fdc03a;
}
#box {
  height: 100vh;
  background-color: rgb(249, 249, 249);
}
.logo {
  width: 100%;
  height: 56vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  div {
    text-align: center;
    font-weight: 600;
    color: black;
    font-size: 5vw;
    margin: 1.5vw 0;
  }
  a {
    text-align: center;
    font-size: 2vw;
    color: #fdc03a;
  }
}
.aboutwe {
  background-color: rgb(249, 249, 249);
  width: 100%;
  .about_list {
    background-color: rgb(249, 249, 249);
    width: 100%;
    .list {
      background-color: #fff;
      padding: 0 20px;
      height: 14vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid rgb(230, 230, 230);
      font-size: 3.5vw;
      span:nth-child(1) {
        display: flex;
        align-items: center;
        .van-icon__image {
          display: block;
          margin-right: 4vw;
        }
      }
    }
  }
}
.bq {
  width: 100%;
  text-align: center;
  margin-top: 50%;
  font-size: 12px;
}
</style>